import React, { useEffect, useMemo, useState } from 'react'
import { Link } from 'react-router-dom'
import { cityGuess, hotcity, groupcity } from 'src/api/getData'
import { Header } from 'src/components'
import { getStore, setStore } from 'src/config/mUtils'
import { useSelector, useDispatch } from 'react-redux'
import { RECORD_ADDRESS, SAVE_GEOHASH } from 'src/redux/action-type'
import './index.scss'

const Home = () => {
    const [guessCityName, setGuessCityName] = useState()
    const [guessCityId, setGuessCityId] = useState()
    const [hotCity, setHotCity] = useState([])
    const [groupCity, setGroupCity] = useState([])
    const dispatch = useDispatch();

    useEffect(() => {
        Promise.all([
            cityGuess(), // 获取当前城市
            hotcity(), //获取热门城市
            groupcity(), //获取所有城市
        ]).then(([res1, res2, res3]) => {
            console.log(res1,res2,res3,'--------------------')
            if (res1) {
                if (res1.latitude && res1.longitude) {
                    let geohashNew = res1.data.latitude + ',' + res1.data.longitude
                    setStore('_geohash', geohashNew)//缓存
                    // geohash保存到store
                    dispatch({
                        type: SAVE_GEOHASH,
                        geohash: geohashNew
                    })
                }
                setGuessCityId(res1.data.id);
                setGuessCityName(res1.data.name);
            }
            setHotCity(res2.data);
            setGroupCity(res3.data);
        })
    }, [])

    //点击图标刷新页面
    const reload = () => {
        window.location.reload();
    }

    //将获取的数据按照A-Z字母开头排序
    const sortgroupcity = useMemo(() => {
        let sortobj = {};
        for (let i = 65; i <= 90; i++) {
            if (groupCity[String.fromCharCode(i)]) {
                sortobj[String.fromCharCode(i)] = groupCity[String.fromCharCode(i)];
            }
        }
        return sortobj
    }, [groupCity])

    return <div className="page_home">
        <Header
            signinUp
            logo={<span slot='logo' className="head_logo" onClick={reload}>ele.me</span>}
        />
        <nav className="city_nav">
            <div className="city_tip">
                <span>当前定位城市：</span>
                <span>定位不准时，请在城市列表中选择</span>
            </div>
            <Link to={`/city/${guessCityId}`} className="guess_city">
                <span>{guessCityName}</span>
                <svg className="arrow_right">
                    <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#arrow-right"></use>
                </svg>
            </Link>
        </nav>
        <section className="hot_city_container">
            <h4 className="city_title">热门城市</h4>
            <ul className="citylistul clear">
                {
                    hotCity.map((item) => {
                        return <li key={item.id}>
                            <Link to={`/city/${item.id}`}>
                                {item.name}
                            </Link>
                        </li>
                    })
                }
            </ul>
        </section>
        <section className="group_city_container">
            <ul className="letter_classify">
                {
                    Object.keys(sortgroupcity).map((key, index) => {
                        let value = sortgroupcity[key];
                        return <li key={key} className="letter_classify_li">
                            <h4 className="city_title">{key}
                                {index === 0 && <span>（按字母排序）</span>}
                            </h4>
                            <ul className="groupcity_name_container citylistul clear">
                                {
                                    value.map((item) => {
                                        return <li className="ellipsis" key={item.id}>
                                            <Link to={`/city/${item.id}`} > {item.name}</Link>
                                        </li>
                                    })
                                }
                            </ul>
                        </li>
                    })
                }
            </ul>
        </section>
    </div >
}

export default Home
